<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用jQuery制作游戏角色</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      #map {
        background-color: black;
        width: 100%;
        height: 100%;
      }

      #player1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
      }
    </style>
  </head>

  <body>
    <div id="map">
      <img src="images/player_left.gif" alt="" id="player1" />
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
      $(function () {
        //禁止鼠标右击
        // 在文档加载完成后执行
        $(document).ready(function () {
          // 在 document 上监听 "contextmenu" 事件，即鼠标右键事件
          $(document).on("contextmenu", function (event) {
            event.preventDefault(); // 阻止默认行为，即弹出右键菜单
          });
        });

        //设置变身状态为否（false）
        let isbig = false;
        let p1 = $("#player1");

        //移动人物(鼠标左键单击)
        $("#map").click(function (e) {
          //获得人物位置x
          let player_x = p1.position().left;
          //判断移动人物左移还是右移 左移人物图片方向朝左边的 否则相反
          //-100是为了纠正图片位置
          if (e.clientX - player_x - 100 < 0) {
            p1.attr("src", "./images/player_left.gif");
          } else {
            p1.attr("src", "./images/player_right.gif");
          }
          //开始移动 （stop终止尚未完成的动画，防止抽搐）
          p1.stop().animate(
            {
              left: e.clientX - 100,
              top: e.clientY - 100,
            },
            2000
          );
        });

        //变身（鼠标左键双击）
        $("#map").dblclick(function () {
          isbig = !isbig; //给变身状态取反

          //判断是否是变身状态
          if (isbig == true) {
            //变身状态操作
            //获取图片朝向(保持保持变身状态方向一致)
            let toWhere = p1.attr("src");
            if (toWhere == "./images/player_left.gif") {
              p1.attr("src", "./images/playerbig_left.gif");
            } else {
              p1.attr("src", "./images/playerbig_right.gif");
            }
            $("#map").click(function (e) {
              //获得人物位置x
              let player_x = p1.position().left;

              if (e.clientX - player_x - 100 < 0) {
                p1.attr("src", "./images/playerbig_left.gif");
              } else {
                p1.attr("src", "./images/playerbig_right.gif");
              }
            });
          } else {
            //获取图片朝向
            let toWhere = p1.attr("src");
            if (toWhere == "./images/playerbig_left.gif") {
              p1.attr("src", "./images/player_left.gif");
            } else {
              p1.attr("src", "./images/player_right.gif");
            }
            $("#map").click(function (e) {
              //获得人物位置x
              let player_x = p1.position().left;

              if (e.clientX - player_x - 100 < 0) {
                p1.attr("src", "./images/player_left.gif");
              } else {
                p1.attr("src", "./images/player_right.gif");
              }
            });
          }
          //开始移动
          p1.stop().animate(
            {
              left: e.clientX - 100,
              top: e.clientY - 100,
            },
            2000
          );
        });
      });
    </script>
  </body>
</html>
